<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="no-cache">
<meta http-equiv="expires" content="-1">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>Design Your Location Based Mobile Game Here!!</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jqueryui.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/jquery.treeview.js"></script>
<script type="text/javascript" src="js/animations.js"></script>
<script type="text/javascript" src="js/projUtil.js"></script>
<script type='text/javascript'
	src='authoringService/interface/GameService.js'></script>
	<script type='text/javascript'
	src='authoringService/interface/GameRuleService.js'></script>
<script type='text/javascript'
	src='authoringService/interface/ItemService.js'></script>
<script type='text/javascript'
	src='authoringService/interface/QuestService.js'></script>
<script type='text/javascript'
	src='authoringService/interface/MediaService.js'></script>
<script type='text/javascript'
	src='authoringService/interface/NPCService.js'></script>
<script type='text/javascript'
	src='authoringService/interface/LocationService.js'></script>
<script type='text/javascript'
	src='authoringService/interface/DialogService.js'></script>
<script type='text/javascript' src='authoringService/engine.js'></script>
<script type='text/javascript' src='authoringService/util.js'></script>
<script type='text/javascript' src='js/upload.js'></script>
<script type='text/javascript' src='js/jquery-graphapi.js'></script>
<script type="text/javascript"
	src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCzP_5nRPH-23UjClb65zSrCqDPKkJnsdE&sensor=false">
	
</script>
<script type="text/javascript" src="js/main.js">
	
</script>
<link type="text/css" href="css/jqueryui.css" rel="stylesheet" />
<link type="text/css" href="css/jquery.treeview.css" rel="stylesheet" />

<link type="text/css" href="css/main.css" rel="stylesheet" />


<%
	HttpSession s = request.getSession(false);
	String username = (String) s.getAttribute("username");
	String designerID = (String) s.getAttribute("designerID");
%>
</head>
<body onload="initialize()">
	<div id="tabs" style="width: 100%; height: 100%">
	
		<ul>
			<li><a href="#tabs-1" class="tabBtn" id="gameTabBtn">Game</a></li>
			<li><a href="#tabs-2" class="tabBtn" id="mapTabBtn">Map</a></li>
			<li><a href="#tabs-3" class="tabBtn" id="dialogTabBtn">Dialog</a></li>	
				
		</ul>
		<div id="tabs-1">

			<table id="gameTable">
				<tr>
					<td width="800"><fieldset>
							<br>
							<legend>Load Game:</legend>
							Select one game: <select name="gameList" id="gameList"
								STYLE="width: 350px">
							</select>

							<button id="loadGameBtn">Load</button>
							<button id="publishGameBtn">Publish</button>
							<button id="revokeGameBtn">Revoke</button>

							<br /> No Game? Create a new Game &gt;&gt;&gt;
							<button id="openCreateGameDialogBtn">Create</button>
							<p>
								Game Status: <span id="designStatus"> --</span>
							</p>
						</fieldset></td>
				</tr>
				<tr>
					<td id="loadedGameArea"><fieldset>
							<br>
							<legend>Loaded Game Details:</legend>
							<p>
								Name: <input type="text" size="30" id="edGameName" /> Publish
								Title: <input type="text" size="30" id="edPublishTitle" /> <br>
							</p>
							<p>
								Publish Description:
								<textarea name="publishDescription" cols="30" rows="3"
									id="edPublishDescription"></textarea>
								Icon:
								<button id="gameIconBtn">Pick</button>

							</p>

							<p>
								Internal Description:
								<textarea name="internalDescription" id="edInternalDescription"
									cols="30" rows="3"></textarea>
								Game Cover:
								<button id="gameCoverBtn">Pick</button>
								<input type="hidden" id="gameCoverID" /> Not picked yet<br>
							</p>
							<p>
								Introduction Script:
								<textarea name="introduction" id="edIntroduction" cols="30"
									rows="3"></textarea>
								End Script:
								<textarea name="ending" id="edEnding" cols="30" rows="3"></textarea>
								<br>
							</p>
							<p>
								<button id="modifyGameBtn">Modify</button>
								<button id="reloadGameBtn">Reload</button>
							</p>
						</fieldset></td>
				</tr>
			</table>

		</div>
		<div id="tabs-2" style="width: 100%; height: 80%">
			<div id="map_canvas" style="width: 100%; height: 100%"></div>

		</div>
		<div id="tabs-3">
			
		</div>
	</div>
	<!-- Log out function, should be uncomment -->

	<input type="hidden" id="username" value="<%=username%>" />
	<input type="hidden" id="designerID" value="<%=designerID%>" />

	<!-- Start modal dialogs -->
	<!-- Create game dialog -->
	<div id="createGameModalDialog">
		<table id="createGameTable">
			<tr>
				<td>Game Name: <input type="text" size="30" id="createGameName" />
				</td>
			</tr>
			<tr>
				<td><fieldset>
						<legend>Game Internal Description:</legend>
						<textarea name="internalDescription"
							id="createInternalDescription" cols="30" rows="3"></textarea>
					</fieldset></td>
			</tr>
			<tr>
				<td>
					<button id="createGameBtn">Create</button>
					<button id="cancelCreateGameBtn">Cancel</button>
				</td>
			</tr>
		</table>
	</div>
	<!-- Enb Create game dialog -->
	<!-- Upload dialog -->
	<div id="uploadModalDialog">
		<table>
			<tr>
				<td></td>
			</tr>
			<tr>
				<td>
					 <iframe name="upload_frame" id="upload_frame"
						src="upload.html"></iframe>

					<form action="<%=request.getContextPath()%>/upload" method="post"
						enctype="multipart/form-data" name="uploadForm" id="uploadForm"
						target="upload_frame">

						Select a picture <input type="file" name="file"> <input
							type="hidden" name="requestUpload" id="requestUpload" value="">
						<input type="hidden" name="gameObjID" id="gameObjID" value="">
						<input type="hidden" name="gameID" id="gameID" value="">
					</form>

				</td>
			</tr>
			<tr>
				<td></td>
			</tr>
		</table>
	</div>
	<!-- End Upload dialog -->
	
	
	<!-- Trigger dialog -->
	<div id="gameRuleModalDialog">
	
	<p>
										Display text after this trigger fires:
										<button id="modifyTextAfterTriggerBtn">Modify</button>
										</p>
								<p><textarea  cols="40" rows="2"
									id="edTextAfterTrigger"></textarea></p>
		<p>
		<select name="select" id="conditionTypeSelect">
		<option value="itempick">Player has Item X</option>
		<option value="itemnum">Player has Item with same Title X with quantity Y</option>
		<option value="questcomplete">Player has completed Quest X</option>
		<option value="queststart">Player has started Quest X</option>
		<option value="npcgreet">Player is greeting with NPC X</option>
        <option value="npcchat">Player has finished dialog with NPC X</option>
    </select>
    <button id="createConditionBtn">Create condition</button></p>
    <p><b id="triggerDescription"></b></p>
		<table id="conditionTable">
  <tr>
    <td width="25%">Condition</td>
    <td width="25%">Parameter X</td>
    <td width="25%">Parameter Y</td>
    <td width="10%">Confirm</td>
    <td width="10%">Delete</td>
  </tr>
		</table>
	</div>
	<!-- End Trigger dialog -->
	<!-- End modal dialogs -->

	<!-- Start message tabs -->
	<!-- By default, z-index in dialogs of jQuery are 1000-->
	<div id="mapTabMessage"
		style="position: relative; top: -50px; z-index: 10000"></div>
	<div id="gameTabMessage" style="position: relative; top: -50px;"></div>
	<!-- End message tabs -->





	<!-- Start Panels -->
	<!--Start Map property from Map tab -->
	<div id="mapPropertyPanel" class="gPanel">
		<!--Sub div 1: items  -->
		<div id="itemPropertySubPanel" class="gameObjPropertyPanel">
			<table id="itemDetailTable" style="width: 100%; height: 100%">
				<tr>
					<td><fieldset>

							<legend>Item Details:</legend>
							<p>
								Title: <input type="text" size="30" id="edItemTitle" /> Icon:
								<button id="itemIconBtn">Pick</button>

								Contained Media:
								<button id="itemContainedMediaBtn">Pick</button>
								
								Pickable Trigger:
								<button id="itemPickableTriggerBtn">Edit</button>
								<br>
							</p>
							<p>
								Display Text:
								<textarea name="itemDisplayText" cols="40" rows="2"
									id="edItemDisplayText"></textarea>
								Can player pick without condition?
								<input type="checkbox" name="checkbox" id="itemPickableCheck">
							</p>


						</fieldset>
						<div>
							<button id="deleteItemBtn"
								style="position: relative; top: -15px; left: 20px">Delete
								this Item</button>


							<button id="modifyItemBtn"
								style="position: relative; top: -15px; left: 480px">Modify</button>
							<button id="reloadItemBtn"
								style="position: relative; top: -15px; left: 480px">Reload</button>
						</div></td>
				</tr>
			</table>
		</div>
		<!--Sub div 2: npcs  -->
		<div id="npcPropertySubPanel" class="gameObjPropertyPanel">
			<table id="npcDetailTable" style="width: 100%; height: 100%">
				<tr>
					<td><fieldset>

							<legend>NPC Details:</legend>
							<p>
								Name: <input type="text" size="30" id="edNPCName" /> Icon:
								<button id="npcIconBtn">Pick</button>

								Figure:
								<button id="npcFigureBtn">Pick</button>
								
								Chattable Trigger:
								<button id="npcChattableTriggerBtn">Edit</button>
								<br>
							</p>
							<p>
								Greeting Text:
								<textarea name="npcGreeting" cols="40" rows="2"
									id="edNPCGreeting"></textarea>
								Can player chat directly without condition?
								<input type="checkbox" name="checkbox" id="npcChattableCheck">
							</p>


						</fieldset>
						<div>
							<button id="deleteNPCBtn"
								style="position: relative; top: -15px; left: 20px">Delete
								this NPC</button>


							<button id="modifyNPCBtn"
								style="position: relative; top: -15px; left: 480px">Modify</button>
							<button id="reloadNPCBtn"
								style="position: relative; top: -15px; left: 480px">Reload</button>
						</div></td>
				</tr>
			</table>
		</div>
		<!--Sub div 3: quests  -->
		<div id="questPropertySubPanel" class="gameObjPropertyPanel">
			<table id="questDetailTable" style="width: 100%; height: 100%">
				<tr>
					<td>
					<fieldset>

							<legend>Quest Details:</legend>

							<p>
								Title: <input type="text" size="30" id="edQuestTitle" /> Icon:
								<button id="questIconBtn">Pick</button>
								Start Trigger:
								<button id="questStartTriggerBtn">Edit</button>
								Complete Trigger:
								<button id="questCompleteTriggerBtn">Edit</button>
							
							</p>
							<p>
								Start  Display  Text :
								<textarea name="questStartText" cols="25" rows="2"
									id="edQuestStartText"></textarea>
							
								Complete Display Text:
								<textarea name="questCompleteText" cols="25" rows="2"
									id="edQuestCompleteText"></textarea>

							</p>
						</fieldset>
						<div>
							<button id="deleteQuestBtn"
								style="position: relative; top: -15px; left: 20px">Delete
								this Quest</button>


							<button id="modifyQuestBtn"
								style="position: relative; top: -15px; left: 455px">Modify</button>
							<button id="reloadQuestBtn"
								style="position: relative; top: -15px; left: 455px">Reload</button>
						</div></td>
				</tr>
			</table>
		</div>
	</div>
	<!--End Map property from Map tab -->
	<!--Start Quest Order  -->
	
	<div id="questOrderPanel" class="gPanel">
	<table style="width: 100%; height: 350px"><tr><td align="left" style="border-width:2px" >
	<ul id="questOrderTable">
	</ul>
	
	</td></tr>
	<tr><td align="center">
	<button id="modifyQuestOrderInTableBtn">Modify</button>
	<button id="reloadQuestOrderInTableBtn">Reload</button>
	</td></tr>
	</table>
	</div>
	<!-- End Quest Order -->
	<!--Game objs accordions from Map tab -->
	<div id="gameObjsAccordionsPanel" class="gPanel">
		<h3>
			<a href="#">Items</a>
		</h3>
		<div>
			<button id="createItemBtn">Create Item</button>
			<table style="width: 100%; height: 200px" id="itemsTable">

			</table>
		</div>
		<h3>
			<a href="#">Non-Player Characters</a>
		</h3>
		<div>
			<button id="createNPCBtn">Create NPC</button>
			<table style="width: 100%; height: 200px" id="npcsTable">

			</table>
		</div>
		<h3>
			<a href="#">Quests</a>
		</h3>
		<div>
		<button id="openQuestOrderPanelBtn" >Quest order editor</button>
			<button id="createQuestBtn">Create Quest</button>
			<table style="width: 100%; height: 200px" id="questsTable">

			</table>
		</div>
	</div>
	<!--End Game objs accordions from Map tab -->
	<!--NPC accordions from dialog tab -->
	<div id="npcDialogsAccordionsPanel" class="gPanel">
		<h3>
			<a href="#">Non-Player Characters</a>
		</h3>
		<div>
			<table style="width: 100%; height: 400px" id="npcsSimpleTable">
				<tr>
					<td><br></td>
				</tr>

			</table>
		</div>
	</div>
	<!--End NPC accordions from dialog tab -->
	<!--Dialog node properties from dialog tab -->
	<div id="npcDialogsPropertyPanel" class="gPanel">
		<div>
			<table id="dNodeDetailTable" style="width: 100%; height: 100%">
				<tr>
					<td><fieldset>

							<legend>Dialog Node Details:</legend>
							<p>
							Name of the dialog node<input type="text" size="30" id="edDNodeName" />
							</p>
							<p>
								Contained Media:
								<button id="dNodeContainedMediaBtn">Pick</button>

							</p>
							<p>
								Display Text or Question:<br>
								<textarea cols="60" rows="3" name="dNodeDisplayText"
									id="edDNodeDisplayText"></textarea>
								<br>
							</p>


							<!--  <div id="dNodeTypeRadio">-->
								<input type="checkbox" name="checkbox" id="dNodeTypeCheck">
								When player visit this node,he or she completed the dialog.
								<br><button id="addBranchBtn">Add a branch</button>
								<div id="branchAnswerArea">
								<input type="radio" id="dNodeDisplayRadio" name="dNodeInteractionType">Go to branch 1 directly
    
    <input type="radio" name="dNodeInteractionType" id="dNodeAnswerRadio" >Answer a question
        <input type="radio" name="dNodeInteractionType" id="dNodeBranchRadio">Select this branch and go next
								<div id="branch1" class="branches"><p>Branch 1:<input type="text" size="30" id="edDNode1Answer" ><button id="modifyAnswer1Btn">Modify answer</button><p></div>
								<div id="branch2" class="branches"><p> Branch 2:<input type="text"  size="30" id="edDNode2Answer" ><button id="modifyAnswer2Btn">Modify answer</button></p></div>
								<div id="branch3" class="branches"><p> Branch 3:<input type="text" size="30" id="edDNode3Answer"  ><button id="modifyAnswer3Btn">Modify answer</button></p></div>
								<div id="branch4" class="branches"> <p>Branch 4:<input type="text" size="30" id="edDNode4Answer" ><button id="modifyAnswer4Btn">Modify answer</button></p></div>
								</div>
							<!-- </div>-->
							<br>
							<br>



						</fieldset>
						<div>
							<button id="deleteDNodeBtn"
								style="position: relative; top: -15px; left: 20px">Delete
								this node</button>


							<button id="modifyDNodeBtn"
								style="position: relative; top: -15px; left: 240px">Modify</button>
							<button id="reloadDNodeBtn"
								style="position: relative; top: -15px; left: 240px">Reload</button>
						</div></td>
				</tr>
			</table>
		</div>
	</div>
	<!--End Dialog node properties from dialog tab -->
	<!-- End Panels -->
</body>
</html>